<template>
  <el-container style="height:100%;">
    <el-main>
      <div ref="main" style="height:100%;">
      <el-tabs v-model="activeName" @tab-click="handleClick" >
        <el-tab-pane label="请求参数" name="first" >
          <el-container style="height:320px;">
            <el-main>
              
            </el-main>
            <el-aside style="width:250px;">
              <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>参数</span>
                <i class="el-icon-plus btn" @click="addParam"></i>
              </div>
              <el-tree
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                default-expand-all
                highlight-current
                ref="tree"
              >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ data.name }}({{ data.code }})</span>
                <span>
                  <i class="el-icon-edit" @click.stop="() => edit(node, data)"></i>
                </span>
              </span>
              </el-tree>
            </el-card>
            </el-aside>
          </el-container>
        </el-tab-pane>
        <el-tab-pane label="数据排序" name="second">
          <el-button type="primary" icon="el-icon-edit" @click="addBtnClick">新增</el-button>
          <el-table
            :data="tableData"
            :height="tabHeight"
            border
            style="width: 100%">
            <el-table-column  prop="name" label="名称" >
              <template slot-scope="scope">
                <el-select v-model="tableData.cloumn" placeholder="请选择字段" clearable :style="{width: '100%'}" :disabled="!scope.row.disabled" >
                  <el-option v-for="(item, index) in stepNumber.cloumns" :key="index" :label="item.title"
                    :value="item.name" :disabled="item.disabled"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序方向">
              <template scope="scope">
                <el-button v-if="scope.row.sort=='desc'" icon="el-icon-sort-down" @click="changeSort(scope.$index, scope.row)"></el-button>
                <el-button v-else icon="el-icon-sort-up" @click="changeSort(scope.$index, scope.row)"></el-button>
              </template>
            </el-table-column>
            <el-table-column :label="$t('base.action')">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button>
                <el-popover placement="top" :ref="'popover-'+ scope.row.id">
                  <p>确定删除吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleDelete(false,scope.$index, scope.row)"
                    >取消</el-button>
                    <el-button
                      type="primary"
                      size="mini"
                      @click="handleDelete(true,scope.$index, scope.row)"
                    >确定</el-button>
                  </div>
                  <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                </el-popover>
                <el-button
                  v-if="scope.$index != 0"
                  size="mini"
                  icon="el-icon-top"
                  @click="handleTop(scope.$index, scope.row)"
                >上移</el-button>
                <el-button
                  v-if="scope.$index != (tableData.length-1)"
                  size="mini"
                  icon="el-icon-bottom"
                  @click="handleBottom(scope.$index, scope.row)"
                >下移</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      </div>
    </el-main>
    <el-footer>
      <div style="float:right;">
      <el-button type="primary" @click="last">上一步</el-button>
      <el-button type="primary" @click="next">下一步</el-button>
      <el-button @click="resetForm">取消</el-button>
      </div>
    </el-footer>
    <el-dialog 
    @open="onOpen"
    @close="onClose"
    :visible.sync="showDialog"
    title="Dialog Titile">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label="参数名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入参数名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参数编码" prop="code">
            <el-input v-model="formData.code" placeholder="请输入参数编码" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参数类型" prop="type">
            <el-select v-model="formData.type" placeholder="请选择参数类型" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="默认值" prop="defaultVal">
            <el-input v-model="formData.defaultVal" placeholder="请输入默认值" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </el-dialog>
  </el-container>
</template>
<script>
  export default {
    data() {
      return {
        tabHeight:120,
        activeName: 'first',
        tableData:[],
        data:[],
        cloumns:this.configCloumns(),
        defaultProps: {
          children: "children",
          label: "name"
        },
        showDialog:false,
        formData: {
            id:"",
            name: undefined,
            code: undefined,
            type: undefined,
            defaultVal: undefined,
          },
        rules: {
          name: [{
            required: true,
            message: '请输入单行文本参数名称',
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '请输入参数编码',
            trigger: 'blur'
          }],
          type: [{
            required: true,
            message: '请选择参数类型',
            trigger: 'change'
          }],
        },
        typeOptions: [{
          "label": "数值",
          "value": "number"
        }, {
          "label": "字符",
          "value": "chart"
        }, {
          "label": "日期",
          "value": "date"
        }, {
          "label": "日期时间",
          "value": "datetime"
        }],
      }
    },
    props:{
      stepNumber:Object
    },
    methods: {
      configCloumns(){
        let cloum = [];
        let cls = this.stepNumber.cloumns;
        debugger;
        for(let i = 0 ; i < cls.length; i++){
          cloum[cls[i].name] ={
            name:cls[i].name,
            title:cls[i].title,
            type:cls[i].type
          };
        }
        console.log(cloum)
        return cloum;
      },
      edit(node,data){
        this.formData = data;
        this.showDialog=true;
      },
      addParam(){
        this.showDialog=true;
      },
      handleTop(index, row){
        this.tableData[index] = this.tableData.splice(index-1, 1, this.tableData[index])[0];
      },
      handleBottom(index, row){
        this.tableData[index] = this.tableData.splice(index+1, 1, this.tableData[index])[0];
      },
      changeSort(index, row) {
        if(this.tableData[index].sort == 'desc'){
          this.tableData[index].sort = 'asc';
        }else{
          this.tableData[index].sort = 'desc';
        }
      },
      handleEdit(index, row){
        debugger;
        for(let i = 0 ; i < this.tableData.length; i++){
          if(i==index){
            this.tableData[i]["disabled"] = true;
          }else{
            this.tableData[i]["disabled"] = false;
          }
        }
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      last(){
        this.stepNumber.active--;
      },
      next(){
        this.stepNumber.active++;
      },
      resetForm() {
        this.$router.push("/");
      },
      addBtnClick(){
        var newline={
          cloumn:{},
          sort:'desc',
          disabled:true,
        };
        for(let i = 0 ; i < this.tableData.length; i++){
          this.tableData[i].disabled = false;
        }
        this.tableData.push(newline);
      },
      handleDelete(flag,index, row){
        if(flag){
          this.tableData.splice(index,1);
        }
      },
      requestData(){
        let _this = this;
        this.axios
          .post(this.HOST+"/apiParameter/tree",{
            apiId:_this.stepNumber.dataApi.id
          })
          .then(function(res) {
            _this.data = res.data.data;
          })
          .catch(function(err) {
            console.log(err);
          });
      },
      onOpen() {},
      onClose() {
        this.$refs['elForm'].resetFields()
      },
      close() {
        this.showDialog = false;
        this.$refs['elForm'].resetFields();
      },
      handelConfirm() {
        var _this = this;
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          if(_this.formData.id ==""){
            this.axios
            .post(this.HOST+"/apiParameter/create",{
              name:_this.formData.name,
              type:_this.formData.type,
              code:_this.formData.code,
              defaultVal:_this.formData.defaultVal||"",
              apiId:_this.stepNumber.dataApi.id,
            })
            .then(function(res) {
              _this.requestData();
            })
            .catch(function(err) {
              console.log(err);
            });
            
          }else{
            this.axios
            .post(this.HOST+"/apiParameter/update",{
              name:_this.formData.name,
              type:_this.formData.type,
              code:_this.formData.code,
              defaultVal:_this.formData.defaultVal,
              id:_this.formData.id,
            })
            .then(function(res) {
              _this.requestData();
            })
            .catch(function(err) {
              console.log(err);
            });
          }
        this.close()
        })
      },
    },
    mounted(){
      this.requestData();
    },
    watch:{
      activeName:{
        handler:function(newVal,oldVal){
          if(newVal == 'second'){
            this.tabHeight=this.$refs.main.offsetHeight-100;
          }
        }
      }
    }
  };
</script>
<style scoped>
.box-card {
  height: calc(100% - 2px);
  width: 100%;
}
</style>